<script setup lang="ts">

import {IconLock, IconUser} from "@arco-design/web-vue/es/icon";
import {reactive, ref} from "vue";
import "@/assets/font.css"
import {type EmailLoginReq, loginAxios} from "@/api/user_api";
import {Message} from "@arco-design/web-vue";
import {useStore} from "@/stores/counter";

const form = reactive<EmailLoginReq>({user_name: "", pwd: ""})

const formRef = ref()

const store = useStore()

const emits = defineEmits(["ok"])

async function login() {
  let val = await formRef.value.validate()
  if (val) {
    return
  }
  let rsp = await loginAxios(form)
  if (rsp.code !== 0) {
    Message.error(rsp.msg)
    return
  }
  Message.success(rsp.msg)
  store.setToken(rsp.data.token)
  emits("ok")
}

function formReset() {
  formRef.value.resetFields(Object.keys(form))
  formRef.value.clearValidate(Object.keys(form))
}

// 抛出方法
defineExpose({formReset})
</script>

<template>
  <a-form
      class="blog_login_form"
      ref="formRef"
      :model="form"
      :label-col-props="{span: 0}"
      :wrapper-col-props="{span: 24}">
    <div class="title">用户登录</div>
    <a-form-item
        field="user_name"
        label="用户名"
        :rules="[{required:true,message:'请输入用户名'}]"
        validate-trigger="blur">
      <a-input v-model="form.user_name" placeholder="用户名">
        <template #prefix>
          <IconUser></IconUser>
        </template>
      </a-input>
    </a-form-item>
    <a-form-item field="pwd" label="密码"
                 :rules="[{required:true,message:'请输入密码'}]"
                 validate-trigger="blur">
      <a-input-password v-model="form.pwd" placeholder="密码">
        <template #prefix>
          <IconLock></IconLock>
        </template>
      </a-input-password>
    </a-form-item>
    <a-button type="primary" @click="login">
      登录
    </a-button>
    <div class="other_login">
      <div class="label">第三方登录</div>
      <div class="icons">
        <a>
          <img src="/image/qq.png" alt="">
        </a>
      </div>
    </div>
  </a-form>
</template>

<style scoped>
.blog_login_form {
  .title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    color: var(--active);
    font-family: kuaikan;
  }

  .other_login {
    margin-top: 20px;

    .label {
      display: flex;
      align-items: center;
      color: var(--color-text-2);
      justify-content: space-between;

      &::before {
        display: inline-flex;
        width: 35%;
        height: 1px;
        content: "";
        background-color: var(--color-text-3);
      }

      &::after {
        display: inline-flex;
        width: 35%;
        height: 1px;
        content: "";
        background-color: var(--color-text-3);
      }
    }

    .icons {
      display: flex;
      justify-content: center;
      margin-top: 10px;

      > a {
        margin-right: 20px;
      }

      &:last-child {
        margin-right: 0;
      }

      img {
        width: 40px;
        height: 40px;

      }
    }


  }
}
</style>
